<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="import.jsp" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="优质女装...">
    <meta name="keywords" content="女装，服饰...">
    <title>CASEY女装官方网站——重新演绎精湛工艺与优雅皮革</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?hr7bri');
            src: url('fonts/icomoon.eot?hr7bri#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?hr7bri') format('truetype'),
                url('fonts/icomoon.woff?hr7bri') format('woff'),
                url('fonts/icomoon.svg?hr7bri#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>

<link rel="shortcut icon" href="../Imgs/logo.ico" type="image/x-icon">
<link rel="stylesheet" href="../CSS/initialization.css">
<link rel="stylesheet" href="../CSS/likePageStyle.css">

<body>

<!-- 	获取登录用户用户名 -->
	<%
		request.setCharacterEncoding("UTF-8");
		String username=String.valueOf(session.getAttribute("username"));
		if(username=="null" || username==null){
			request.getRequestDispatcher("message.jsp?content=登录以查看商品详细信息&href=back").forward(request,response);
		}
	%>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="kindsBox" style="width:400px;">
            <ul>
                <li><a href="clothePage.jsp">服装系列</a></li>
                <li><a href="bagPage.jsp">手袋</a></li>
                <li><a href="otherPage.jsp">配饰</a></li>
            </ul>
        </div>
        <div class="title" onclick="backToHomepage()">CASEY</div>
        <div class="guideBox" style="width:400px;">
            <ul>
                <li><a class="guideBoxA" href="#"><%if(username!=null && username!="null"){out.println("<a href='#' style='font-size:15px;'><span class='icomoon' style='line-height:100%;'></span> &nbsp;"+username+"</a><a href='index.jsp' style='margin-left:20px;'><span class='icomoon'></span></a>");}else{out.println("<a href='index.jsp'><span class='icomoon' style='line-height:100%;''></span> 登录/注册</a>");}%></a></li>
                <li><a href="#">我的收藏</a></li>
                <li><a href="#">购物袋</a></li>
            </ul>
        </div>
        
		<!-- 	背景 -->
		<div class="likeBackground"></div>
    </div>
    <div class="contentContainer">

        <%
// 		获取某商品被收藏的情况
		likeMapper likeMapper=sqlsession.getMapper(likeMapper.class);
        productMapper productMapper=sqlsession.getMapper(productMapper.class);
		List<like> like=likeMapper.selectByUsername(username);
		int product_id=-1;
		if(like.size()>0){
			%>
			<div class="content">
			<%
			for(like s:like){
				product_id=s.getLike_id();
				List<product> product=productMapper.selectProductByID(product_id);
				List<product_img> productImg=productMapper.selectProductImgById(product_id);
				String pName="";int pPrice=-1;int pStorage=-1;String pKind="";String img="";
				for(product x:product){
					pName=x.getName().trim();pPrice=x.getPrice();pStorage=x.getStorage();pKind=x.getKind().trim().toUpperCase();
				}
				for(product_img y:productImg){
					img=y.getImg1();
				}
				out.println("<div class='container'><div class='pImg' style='background-image:url(../productsImgs/"+pKind+"/"+img+".jpg')></div></div>");
				
			}  
			%>
			</div>
			<%
		}else{
// 			用户没有收藏任何商品
			out.println("<div class='noCollection'><span>您还没有收藏任何商品</span><button>继续购物</button></div>");
		}
        %>

    </div>


<div style="height:100vh"></div>


    <!-- footer -->
    <div id="footer" class="footer">
        <ul>
            <li class="dt">专属服务</li>
            <li class="dd">免费标准配送</li>
            <li class="dd">免费礼品包装</li>
            <li class="dd" style="margin-bottom:50px;">预约门店服务</li>
            <li class="dt">需要帮助？</li>
            <li class="dd">联系我们</li>
            <li class="dd">常见问题</li>
        </ul>
        <ul>
            <li class="dt">购物帮助</li>
            <li class="dd">支付相关</li>
            <li class="dd">配送</li>
            <li class="dd">退换货</li>
            <li class="dd">发票</li>
            <li class="dd">保养与维修</li>
        </ul>
        <ul>
            <li class="dt">关于公司</li>
            <li class="dd">关于CASEY</li>
            <li class="dd">道德规范</li>
            <li class="dd">职业发展</li>
            <li class="dd">细则与条款</li>
            <li class="dd">隐私与COOKIE</li>
            <li class="dd">企业信息</li>
        </ul>
        <ul>
            <li class="dt">关注CASEY</li>
            <li class="dd">微信</li>
            <li class="dd">抖音</li>
            <li class="dd">腾讯视频</li>
            <li class="dd" style="margin-bottom:50px;">小红书</li>
            <li class="dd">在线顾问</li>
            <li class="dd">17816752712</li>
        </ul>
        <ul>
            <li class="dt">订阅CASEY电子资讯</li>
            <li class="dd">通过订阅，即代表您接受CASEY<em style="color:blue;text-decoration:underline;">隐私政策条款</em></li>
            <li class="dd" style="margin-bottom:50px;"><input type="text" placeholder="电子邮件地址" style="width:200px;">
            </li>
            <li class="dt">直营店查询</li>
            <li class="dd"><input type="text" placeholder="请选择省" style="margin-right:30px;"><input type="text"
                    placeholder="请选择市"></li>
        </ul>
    </div>

</body>

<script>

    var title = document.querySelector(".title");
    var nav = document.querySelector(".nav");
    // 随着滚轮下滑，标题变小
    window.addEventListener(' scroll', scroll); function scroll() {
        const scrollY = window.scrollY; if (scrollY >
            0) {
            if (200 - scrollY / 1.5 > 100) {
                title.style.fontSize = 100 - scrollY / 3 + "px";
                nav.style.transform = "translateY(-" + scrollY / 2 + "px)";
            } else {
                nav.style.transform = "";
            }
            if (scrollY > 300) {
                window.onmousewheel = temp;
            } else {
                nav.classList.remove("navSpecial");
                title.classList.remove("titleSpecial");
            }
        } else {
            nav.classList.remove("navSpecial");
            title.classList.remove("titleSpecial");
            nav.classList.add("navSpecialHide");
        }
    }

    // 鼠标滚轮上滑（下滑）显示（隐藏）导航栏
    function temp(e) {
        if (e.wheelDelta) {
            if (window.scrollY > 300) {
                if (e.wheelDelta > 0) {
                    nav.classList.add("navSpecial");
                    title.classList.add("titleSpecial");
                } else {
                    nav.classList.remove("navSpecial");
                    title.classList.remove("titleSpecial");
                }
            }
        }
    }
    // 点击标题返回主页
    function backToHomepage() {
        window.location.href = "homePage.jsp";
    }

</script>

</html>